<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <title>京东移动端流式布局</title>
    <!-- 引入我们的css初始化文件 -->
    <link rel="stylesheet" href="./css/normalize.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 顶部 -->
    <div class="pageTop">
        <!-- 菜单 -->
        <div class="menu">
            <a href="#"></a>
        </div>
        <!-- 搜索 -->
        <div class="searchDiv">
            <div class="search">
                <div class="jdLogo"></div>
                <!-- 放大镜 -->
                <i></i>
                <!-- 搜索输入框 -->
                <input type="text" placeholder="笔记本内存条">
            </div>
        </div>
        <!-- 登陆 -->
        <div class="land"><a href="#">登陆</a></div>
    </div>
    
    <!-- 轮播图背景色 -->
    <div class="bg_red"></div>
    
    <!-- 轮播图 -->
    <div class="rotationDiv">
        <!-- 右上角浮动京东logo -->
        <div class="logoFloat">
            打开京东APP
        </div>
        <!-- 轮播图 -->
        <ul class="rotationUl clearFloat">
            <li><a href=""><img src="./img/1.jpg" alt=""></a></li>
            <li><a href=""><img src="./img/2.jpg" alt=""></a></li>
            <li><a href=""><img src="./img/3.jpg" alt=""></a></li>
            <li><a href=""><img src="./img/4.jpg" alt=""></a></li>
            <li><a href=""><img src="./img/5.jpg" alt=""></a></li>
            <li><a href=""><img src="./img/6.jpg" alt=""></a></li>
            <li><a href=""><img src="./img/7.jpg" alt=""></a></li>
        </ul>
        <!-- 轮播图btn按钮 -->
        <div class="rotationBtnDiv">
            <ul class="rotationBtnUl clearFloat">
                <li>a</li>
                <li>b</li>
                <li>c</li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

    <!-- AD区域 -->
    <div class="ADdiv">
        <a href="#"><img src="./img/AD1.JPG" alt=""></a>
        <a href="#"><img src="./img/AD2.JPG" alt=""></a>
        <a href="#"><img src="./img/AD3.JPG" alt=""></a>
    </div>
    <!-- TAB区域 -->
    <div class="TABdiv">
        <div class="TABwindows">
            <ul class="funUlLeft">
                <li><a href="#"><img src="./img/JDCS.png" alt=""><span>京东超市</span></a></li>
                <li><a href="#"><img src="./img/SMDQ.png" alt=""><span>数码电器</span></a></li>
                <li><a href="#"><img src="./img/JDFS.png" alt=""><span>京东服饰</span></a></li>
                <li><a href="#"><img src="./img/JDSX.png" alt=""><span>京东生鲜</span></a></li>
                <li><a href="#"><img src="./img/JDDJ.png" alt=""><span>京东到家</span></a></li>
                <li><a href="#"><img src="./img/CZJF.png" alt=""><span>充值缴费</span></a></li>
                <li><a href="#"><img src="./img/9.9YP.png" alt=""><span>9.9元拼</span></a></li>
                <li><a href="#"><img src="./img/LQ.png" alt=""><span>领券</span></a></li>
                <li><a href="#"><img src="./img/JQ.png" alt=""><span>借钱</span></a></li>
                <li><a href="#"><img src="./img/PLUSHY.png" alt=""><span>PLUS会员</span></a></li>
            </ul>
            <ul class="funUlRight">
                <li><a href="#"><img src="./img/JDGJ.png" alt=""><span>京东国际</span></a></li>
                <li><a href="#"><img src="./img/JDPM.png" alt=""><span>京东拍卖</span></a></li>
                <li><a href="#"><img src="./img/WPH.png" alt=""><span>唯品会</span></a></li>
                <li><a href="#"><img src="./img/WPH.png" alt=""><span>玩3C</span></a></li>
                <li><a href="#"><img src="./img/WEM.png" alt=""><span>沃尔玛</span></a></li>
                <li><a href="#"><img src="./img/MZG.png" alt=""><span>美妆馆</span></a></li>
                <li><a href="#"><img src="./img/JDLX.png" alt=""><span>京东旅行</span></a></li>
                <li><a href="#"><img src="./img/PPES.png" alt=""><span>拍拍二手</span></a></li>
                <li><a href="#"><img src="./img/WLCX.png" alt=""><span>物流查询</span></a></li>
                <li><a href="#"><img src="./img/QB.png" alt=""><span>全部</span></a></li>
            </ul>
        </div>
        <div class="TABbtn">
            <ul>
                <li></li><li></li>
            </ul>
        </div>
    </div>
    <!-- 来电好货、国朝风尚 -->
    <div class="LDHH-GCFS">
        <h2>来电好货&nbsp;&nbsp;&nbsp;&nbsp;国朝风尚</h2>
        <div><span>正品直邮</span><img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/122304/6/4867/26484/5ee73aa3E8a601402/04d440839b734589.png!q70.jpg.dpg" alt=""></div>
        <div><span>3C大放价</span><img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/146350/29/713/33082/5ee73d9fE1ae995ad/0ec365679efbf615.png!q70.jpg.dpg" alt=""></div>
        <div><span>国货正当时</span><img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/121172/17/1584/29106/5ebd1637Ec4c82232/aa56520b3ab276be.png!q70.jpg.dpg" alt=""></div>
        <div><span>都是你爱的</span><img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/141856/19/761/28886/5ee73fa2E4401ba28/9386324f55097e7b.jpg!q70.jpg.dpg" alt=""></div>
    </div>
    <!-- 京东秒杀 -->
    <div class="JDMS">
        <!-- 顶部区域 -->
        <div class="ms">
            <h2>京东秒杀</h2><span>20</span><p><span>00</span>:<span>00</span>:<span>00</span></p>
            <a href="#">更多秒杀 <i>></i></a>
            
        </div>
    </div>
</body>
</html>